<template>
    <jb-crud-page ref="pageRef" searchUrl="/aiResource/list" :conditions-align="'start'" :editComponent="ModelEdit"
                  :searchConditions="pageConditions" @afterSearch="formatData">
        <template #conditions-form>
            <jb-input v-model:value="pageConditions.keywords" placeholder="请输入关键词搜索" style="width: 200px"></jb-input>
        </template>
        <template #opt>
            <jb-btn type="primary" secondary @click="pageRef.showEditModal('添加资源')">添加资源</jb-btn>
        </template>

        <template #default="{list,tableStartIndex}">
            <jb-table :data="list" :start-index="tableStartIndex" :row-config="{height: 100}">
                <jb-column type="seq" title="序号" width="60" fixed="left"></jb-column>
                <jb-column field="name" title="资源名称" min-width="160" fixed="left"></jb-column>
                <jb-column field="modelName" title="资源类型" min-width="160"></jb-column>
                <jb-column field="defaultModel" title="defaultModel" min-width="160"></jb-column>
                <jb-column field="apiKey" title="apiKey" min-width="160">
                    <template #default="{row}">
                        <n-input v-if="row.apiKey" :bordered="false" :readonly="true" type="password"
                                 show-password-on="click" placeholder="apiKey" v-model:value="row.apiKey"/>
                        <span v-else>-</span>
                    </template>
                </jb-column>
                <jb-column field="apiSecret" title="secretKey" min-width="160">
                    <template #default="{row}">
                        <n-input v-if="row.apiSecret" :bordered="false" :readonly="true" type="password"
                                 show-password-on="click" placeholder="apiKey" v-model:value="row.apiSecret"/>
                        <span v-else>-</span>
                    </template>
                </jb-column>
                <jb-column field="apiUrl" title="apiUrl" min-width="160"></jb-column>
                <jb-column field="limits" title="频率限制" min-width="140">
                    <template #default="{row}">
                        <n-scrollbar style="max-height: 100px"
                                     v-if="row.formattedLimits && row.formattedLimits.length > 0">
                            <div style="display: flex; flex-direction: column">
                                <n-tag v-for="(formattedLimit, i) in row.formattedLimits" :key="i" type="info"
                                       style="margin-top: 5px">
                                    {{ formattedLimit }}
                                </n-tag>
                            </div>
                        </n-scrollbar>
                        <span v-else>无限制</span>
                    </template>
                </jb-column>
                <jb-column field="createTime" title="创建时间" min-width="160"></jb-column>
                <jb-column field="enable" title="是否启用" min-width="160" fixed="right">
                    <template #default="{ row }">
                        <jb-switch v-model:value="row.enable" :url="`/aiResource/toggleEnable/${row.id}`"
                                   @update:value="pageRef.loadData()"></jb-switch>
                    </template>
                </jb-column>

                <jb-column title="操作" width="120" fixed="right">
                    <template #default="{ row }">
                        <jb-btn class="mx-8px" tip-text="编辑资源" secondary circle type="warning" :icon="Icons.EDIT"
                                @click="pageRef.showEditModal('编辑资源',{id:row.id})"></jb-btn>

                        <jb-btn class="mx-8px" tip-text="删除资源" secondary circle type="error" :icon="Icons.DELETE"
                                :confirmText="'确认删除该资源？'" :url="`/aiResource/del/${row.id}`"
                                @success="pageRef.loadData()"></jb-btn>
                    </template>

                </jb-column>

            </jb-table>
        </template>
    </jb-crud-page>
</template>

<script setup>
import {
    onMounted,
    ref
} from 'vue'
import ModelEdit from './cpns/model-edit.vue'
import {
    useResetableData
} from '@/hooks/common/use-resetable-data'
import {
    Icons
} from '@/constants'
import {
    JBoltApi
} from "@/service/request/index.js";

// Expose
const pageRef = ref(null)
const pageConditions = useResetableData({
    keywords: ''
})

function handleModalYesClick({
                                 componentRef,
                                 close
                             }) {
    componentRef.submit(() => {
        close()
        pageRef.value.loadData()
    })
}

const modelTypeList = ref([])
onMounted(() => {
    JBoltApi.tryGet('/aiModelType/list').then(res => {
        modelTypeList.value = res.data
    }).catch(error => {
        console.error(error)
    })
})

function formatData(data) {
    if (data) {
        data.forEach(item => {
            item.limits = item.limits ? JSON.parse(item.limits) : [];
            item.formattedLimits = item.limits.map(limit => {
                const timesText = limit.times === 0 ? '无限制' : `${limit.times}次`;
                const unitText = limit.unit === 'day' ? '天' :
                    limit.unit === 'hour' ? '小时' :
                        '分钟';
                return `${timesText} / 每${unitText}`;
            });
        });
    }
    return data;


}
</script>

<style scoped>
.page-container {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.content-card {
    flex: 1;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.fixed-header {
    padding: 16px;
    background-color: #fff;
    border-bottom: 1px solid #f0f0f0;
    flex-shrink: 0;
}

.table-content {
    flex: 1;
    overflow-y: auto;
    padding: 0 16px;
}

.fixed-footer {
    padding: 16px;
    background-color: #fff;
    border-top: 1px solid #f0f0f0;
    display: flex;
    justify-content: flex-end;
    flex-shrink: 0;
}

.ml-2 {
    margin-left: 8px;
}
</style>